<template>
	<view class="one-store">
		<view class="search_box">
			<uni-easyinput class="search" type="text" placeholderStyle="font-size:28rpx;" @confirm="search()"
				:inputBorder="false" @clear="clear" prefixIcon="search" @input="search()" v-model="selectVo.name"
				placeholder="请输入商品型号"></uni-easyinput>
			<view class="search_btn" @click="search()">
				搜索
			</view>
		</view>
		<view class="scroll_content">
			<scroll-view class="scroll-view_list" :scroll-top="scrollTop" :refresher-triggered="triggered"
				refresher-background="transparent" @refresherpulling="refresherpulling" refresher-enabled="true"
				scroll-y="true" @scrolltolower="scrolltolower" @refresherrefresh="onRefresh">
				<view v-if="is_goodsTypeList" class="void_goods">
					<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
					<view class="tip">该型号暂无保修政策</view>
				</view>
				<view class="order_list_box" v-if="goodsModelList.rows.length>0">
					<view class="order_list">
						<view class="order_list_item" @click="gologDetail(item)"
							v-for="(item,index) in goodsModelList.rows" :key="index">
							<view class="item_type"
								:class="{'item_type_active':index==is_active,'is_active_onclick':item.id==is_active&&is_active_onclick}">
								<view class="item_type_">
									编号：<span class="text">{{item.code}}</span>
								</view>
								<view class="item_type_">
									型号：<span class="text" style="color: #007cff;">{{item.name}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import { onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
	import apiCode from '@/util/api/code.js'
	import _ from "lodash";
	const triggered = ref(false)

	// 搜索
	const selectVo = ref({
		"name": "",
		"limit": 0,
		"page": 0,
	})

	const goodsModelList = ref({
		total: 0,
		rows: []
	})
	const scrollTop = ref(0)
	const clear = () => {
		selectVo.value.name = ''
		selectVo.value.page = 1
		scrollTop.value = 0
		// getGoodsModelList()
	}
	const search = _.debounce(async () => {
		selectVo.value.name = selectVo.value.name.trim()
		selectVo.value.page = 1
		scrollTop.value = 0
		if (!selectVo.value.name) return
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		getGoodsModelList()
	}, 500)
	const is_goodsTypeList = ref(false)
	// 获取列表
	const getGoodsModelList = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		let data = _.cloneDeep(selectVo.value)
		apiCode.getGoodsModel(data).then(res => {
			uni.hideLoading()
			if (res.success) {
				if (goodsModelList.value.rows.length < goodsModelList.value.total && selectVo.value.page > 1) {
					goodsModelList.value.rows = [...goodsModelList.value.rows, ...res.data.rows]
					goodsModelList.value.total = res.data.total
				} else {
					goodsModelList.value = res.data
					goodsModelList.value.total = res.data.total
					is_goodsTypeList.value = res.data.rows.length == 0
				}
			}
		})
	}
	onLoad(async () => {
		// getGoodsModelList()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 下拉刷新
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}
	// 底部触发
	const scrolltolower = () => {
		if (goodsModelList.value.rows.length < goodsModelList.value.total) {
			selectVo.value.page += 1
			getGoodsModelList()
		}
	}
	const onRefresh = async () => {
		selectVo.value.name = ''
		selectVo.value.page = 1
		scrollTop.value = 0
		await getGoodsModelList()
		setTimeout(() => {
			triggered.value = false
		}, 800)
	}
	//
	const is_active = ref()
	const is_active_onclick = ref(false)
	const gologDetail = (item) => {
		is_active.value = item.id
		is_active_onclick.value = true
		uni.setStorageSync('IS_GOODS_TYPE_KEY', item)
		setTimeout(() => {
			is_active_onclick.value = false
			uni.navigateTo({
				url: '/pages_user/fee/fee?policy=1&queryType=2'
			})
		}, 300)
	}
</script>

<style lang="scss" scoped>
	.one-store {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		position: relative;

		.search_box {
			display: flex;
			align-items: center;
			// width: 100%;
			padding: 24rpx;
			background-color: #fff;

			:deep(.uni-easyinput__content) {
				background-color: #f3f4f8 !important;
				border-radius: 50rpx;
			}

			.search {
				flex: 1;
				padding: 0 12rpx;
			}

			.search_btn {
				font-size: 28rpx;
				font-weight: bold;
				color: #007cff;
				margin-left: 12rpx;
			}
		}

		.status_search {
			position: absolute;
			top: 190rpx;
			width: 100%;

			.status_tag_pu {
				position: absolute;
				top: 0rpx;
				width: 100%;
				z-index: 3;
				box-sizing: border-box;
				// padding: 24rpx;
				box-sizing: border-box;

				.centent_tag {
					display: flex;
					background-color: #FFFFFF;
					flex-wrap: wrap;
					gap: 16rpx;
					padding: 24rpx;
					position: relative;

					.item_tag {
						border: 1px solid #EBEEF5;
						font-size: 24rpx;
						padding: 12rpx 20rpx;
						border-radius: 6rpx;
					}

					&::after {
						position: absolute;
						content: '';
						top: -12rpx;
						left: 10%;
						width: 0;
						height: 0;
						border-left: 10rpx solid transparent;
						border-right: 10rpx solid transparent;
						border-bottom: 12rpx solid #fff;
					}
				}
			}
		}


		.scroll_content {
			height: 100%;
			flex: 1;
			overflow: hidden;

			.scroll-view_list {

				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}

				height: 100%;
				box-sizing: border-box;

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 50vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}

				.order_list_box {
					padding-bottom: 200rpx;
				}

				.order_list {
					padding: 0 34rpx;
					box-sizing: border-box;
					background-color: #FFFFFF;

					display: flex;
					flex-direction: column;
					// gap: 24rpx;

					&_item {
						&~.order_list_item {
							border-top: 1px solid #eee;
						}

						.item_type {
							display: flex;
							padding: 16rpx 12rpx;
							width: 100%;
							flex-direction: column;
							font-size: 28rpx;
							color: #777;

							.item_type_ {
								box-sizing: border-box;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}

							.text {
								color: #000;
							}
						}

						.item_type_active {

							color: #007cff;

							.text {
								color: #007cff;
							}
						}

						.is_active_onclick {
							background-color: #e9edf5;
						}
					}

				}
			}
		}
	}
</style>